[항공사 웹사이트의 컴포넌트 접근성 높이기] 초코(강다빈) 미션 제출합니다 #121
Conversation
src/components/TravelSection.tsx
Outdated
| const nextTravel = () => { | ||
| const newIndex = (currentIndex + 1) % travelOptions.length; | ||
| setCurrentIndex(newIndex); | ||
| getCardInfo(newIndex); | ||
| }; | ||
|
|
||
| const prevTravel = () => { | ||
| const newIndex = (currentIndex - 1 + travelOptions.length) % travelOptions.length; | ||
| setCurrentIndex(newIndex); | ||
| getCardInfo(newIndex); | ||
| }; |
There was a problem hiding this comment.
으음,, 캐러셀 이동 버튼을 클릭해도 getCardInfo 로 문자열을 가지고 와도 스크린 리더가 파악하지 못하겠군요!
이 코드의 aria 속성으로 스크린 리더가 작동하고 있는 것 같아서 삭제했습니다!
짚어주셔서 감사해요 :>
{travelOptions.map((option, index) => (
<button
key={index}
className={`${styles.card} ${index === currentIndex ? styles.cardActive : ''}`}
onClick={() => handleCardClick(option.link)}
role="button"
aria-live="polite"
aria-label={getCardInfo(index)}
>
| <button | ||
| className={`${styles.navButton} ${styles.navButtonPrev}`} | ||
| onClick={prevTravel} | ||
| aria-label="이전 여행 상품" | ||
| > | ||
| <img src={chevronLeft} className={styles.navButtonIcon} alt="" /> | ||
| </button> |
There was a problem hiding this comment.
alt="이전 여행 상품"을 하는 대신 이렇게 구현했을 떄 차이나 장점이 있을까요??
There was a problem hiding this comment.
저는 img 자체보다는 button에 초점을 맞춰야 되는 것 같아서 aria-label 속성을 추가했어요. 이에 대해서 자료를 더 찾아보니 이렇게 사용하기를 권장하고 있더라고요.
예를 들어 SVG 아이콘만 표시하는 HTML 버튼 요소는 aria-label보조 기술 사용자에게 동작을 명확히 설명하기 위해 를 사용할 수 있습니다.
<button aria-label="Search"><img src="search-icon.svg" alt=""></button>
링크 첨부해둘게요!
There was a problem hiding this comment.
img보다 button에 초점을 맞춰야된다는 게 설득력이 있네요! 자료 공유도 감사합니다 😀
| const getCardInfo = (index: number) => { | ||
| const option = travelOptions[index]; | ||
|
|
||
| return `${travelOptions.length}개의 여행 상품 중 ${index + 1}번째 상품. | ||
| ${option.departure} 출발 ${option.destination} 도착, | ||
| ${option.type}, | ||
| 가격 ${option.price}원. 선택하면 예약 페이지로 이동합니다.`; | ||
| }; |
There was a problem hiding this comment.
초코의 TravelSection을 스크린 리더로 들으니 확실히 가청성이 좋네요~ 문장도 커스터마이징 되어있고, 적절히 끊어서 읽어줘서 듣기에 좋았습니다 👍
| <p className={`${styles.cardTitle} heading-3-text`}> | ||
| {option.departure} - {option.destination} | ||
| </p> |
There was a problem hiding this comment.
저도 놓쳤다가 코드리뷰 하면서 든 생각인데, 이 p 태그는 h3 태그로 바꿔주는 게 적절하려나요..?🤔
There was a problem hiding this comment.
h3으로 태그를 수정하면 이렇게 label들이 잡히게 되더라고요. p태그가 더 적절하지 않을까요?
| p 태그 | h3 태그 |
|---|---|
 |
 |
There was a problem hiding this comment.
아하... 저는 heading-3-text 클래스를 보고 앗차했는데, p 태그가 적절하겠군요..! 죄송합니다..ㅎㅎㅎ
src/App.tsx
Outdated
| <div className="App"> | ||
| <SpinButton /> | ||
| <div className={styles.app}> | ||
| <title>A11Y AIRLINE - 안전하고 쾌적한 여행</title> |
There was a problem hiding this comment.
html의 title을 바꿀 생각을 못하고 여기에 넣어버렸네요 ㅎㅎ 수정했습니당
|
수야, 소소하게 코멘트 반영해보았습니다! 혹시 시간 되시면 코레아 서비스의 접근성 관련 PR 내용 읽고 답해주실 수 있을까요?? |
There was a problem hiding this comment.
늦어서 죄송합니다..!
코멘트로 답변주셔서 감사합니다! 덕분에 접근성에 대해서 더 잘 알게된 것 같아요 👍
코레아 서비스를 스크린모드로 사용해보면서 느낀 것들을 토대로 피드백을 적어봤습니다! 접근성에 대해 전문성이 없는 사람의 피드백임을 감안해주십쇼!! 😁
- 최초 서비스 접근: ‘CoReA’를 아나운서가 ‘코리아’라고 읽어줍니다..ㅎ 사소하다면 사소하지만, 서비스의 이름 자체의 발음은 스크린리더에게 명확히 전달해주면 좋지 않을까 조심스레 생각해봅니다..!
- 로그인: github o auth인 것을 표현해주면 더 좋을 것 같습니다! 이후 github 로그인 프로세스는 github에서 관리하는 부분이라 어쩔 수 없을 것 같고, 로그인 후 돌아왔을 때 초코의 생각처럼 피드백이 있으면 더욱 좋을 것 같습니다!
- 모임 목록:
- 프론트엔드 방만 보려고 필터링 selectbox를 클릭했을 때 포커싱이 풀렸습니다!
- ‘모집 중’을 읽어주는 걸 듣고 더블클릭으로 모달을 켰는데, 포커싱이 안돼서 스크린리더가 전혀 읽어주지 못했어요. 😭
- 방 참여 이후는 플로우를 경험해볼 수 없는 것 같아서 여기까지만 진행했습니다.
초코의 질문에 제 생각을 말씀드려보자면, 핵심 플로우 상에서 모달로 제공하는 UI가 주요한 것 같아요. 로그인이나 모임 목록을 들을 때는 불편할 순 있어도 어찌저찌 쓸 순 있을 것 같은데, 모달은 시각장애인들에게 많은 혼란을 줄 수도 있겠다는 생각이 들었어요.
모달이 렌더링될 때 스크린리더가 읽어줄 수 있는 있도록 개선하는 게 가장 우선순위가 높다고 생각합니다!
여기까지 리뷰를 마무리하고 Approve를 드리려고 합니다. 고생하셨습니다! 👏
|
우와아 코레아 서비스를 직접 사용해보시고 정성껏 남겨주신 코멘트라는 게 너무 잘 느껴지네요. |
안녕하세요 수야~ 초코입니다.
리뷰어로 만나는 건 처음인데, 리뷰 잘 부탁드립니다 :>
🔥 결과
(참고: 갤럭시 기준 휴대폰 녹화 이슈가 있어서,, 크루의 도움으로 영상을 녹화해서 AFTER밖에 없습니다 ㅠ)
default.mp4
✅ 개선 작업 목록
1 컴포넌트 접근성 개선 - 이미지 캐로셀
2 페이지 접근성 개선
🧐 우리 팀의 접근성 체크리스트
서비스 소개
자주 사용되는 기능 플로우
체크리스트 v1.
해당 플로우의 각 단계에 대한 질문 (개인적인 생각)
1. 화면을 볼 수 없는 사용자가 이 단계를 완료할 수 있는가?
2. 이 단계에서 제공하는 정보나 지시 사항이 모든 사용자에게 명확한가?
전반적으로 프로세스가 길고, 각 정보들이 방대하기 때문에 명확하게 전달이 될지 의문이다.
3. 전체적인 의견
사실 코드리뷰와 코드리뷰 활동을 기반으로 서로 피드백을 해나가며 성장해 나가는 저희 서비스의 목표에 있어서, 누구나 서비스를 사용할 수 있는가? 라는 질문에 당연하게 그렇다. 라고 할 수는 없는 것 같아요. 코드를 작성하는 데 무리가 없어야 하고, 깃허브 서비스에 의존하고 있기 때문에 제약이 많다고 생각해요. 이러한 서비스에서 접근성을 챙겨야 한다면 어느 부분이 제일 중요해 보이는지 수야의 의견이 궁금해요!